<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>智慧校园</title>
		<!-- 引入高德地图相关的CSS资源 -->
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
			}

			/* 清除标记按钮 */
			#clearButton {
				position: absolute;/* 绝对定位 */
				top: 65px;/* 距离顶部10像素 */
				right: 10px;/* 距离右侧10像素 */
				padding: 10px 20px;/* 添加内边距 */
				background-color: #007BFF;/* 设置背景颜色 */
				color: white;/* 设置文字颜色 */
				border: none;/* 移除边框 */
				border-radius: 5px;/* 圆角边框 */
				cursor: pointer;/* 鼠标悬停时显示指针 */
			}

			/*显示地图要素*/
			.input-card {
				position: absolute;/* 使用绝对定位来控制卡片位置 */
				right: 10px;/* 卡片距离右侧10px */
				/* 其他通用样式... */
			}

			/* 第一张卡片的位置 */
			.input-card.features-card {
				top: 200px;/* 第一张卡片距离顶部10px */
				margin-bottom: 400px;/* 第一张卡片底部间隔 */
			}

			/* 第二张卡片的位置 */
			.input-card.route-card {
				top: 600px;/* 第二张卡片距离顶部250px，这个值需要根据第一张卡片的高度进行调整 */
				margin-bottom: 10px;/* 第二张卡片底部间隔 */
			}
			
			
			/*地图控件鹰眼、经纬度显示*/
			/*经纬度显示*/
			.ol-mouse-position {
			position: absolute;
			bottom: 60px;
			left: 10px;
			z-index: 999;
			background: rgba(255, 255, 255, 0.7);
			padding: 5px;
			border-radius: 5px;
			}
			
			
			/*步行导航*/
			#panel{
				font-size: 12px;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
				line-height: 1.5;
				font-weight: 300;
				color: #111213;
				box-sizing: border-box;
				position: fixed;
				background-color: white;
				max-height: 90%;
				overflow-y: auto;
				top: 180px;
				left: 10px;
				width: 280px;
			}
			
			#panel .amap-call {
				background-color: #009cf9;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}
			
			#panel .amap-lib-walking {
				font-weight: 300;
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				color: #565656;
				font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 12px;
				line-height: 1.5;
				background-color: #fff;
				word-wrap: break-word;
				border: 1px solid silver;
				border-bottom-left-radius: 4px;
				border-bottom-right-radius: 4px;
				overflow: hidden;
			}
					
		</style>

		<!-- 引入高德js相关的资源 -->
		<!-- 密钥和key -->
		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: "9497fb6552130d5d26e90c0c1082ca2a",
			};
		</script>
		<script src="https://webapi.amap.com/loader.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=85aaa8a9d92f5a244271e3bc7494072f">
		</script>
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=85aaa8a9d92f5a244271e3bc7494072f&plugin=AMap.Walking"></script>
		<script src="./storage.js"></script>
	</head>
	<body>
		<!--创建地图容器-->
		<div id="container"></div>
		
		<!-- 面板容器 -->
		<div id="panel"></div>
		
		<!-- 高德地图css中自带有info样式 -->
		<div class="info">点击地图，可标注地点；点击地点，可以打卡</div>
		
		<!--清除标记按钮-->
		<button id="clearButton">Clear Markers</button>
		
		<!-- 高德css模板 -->
		<div class="input-card" style="width: 17rem">
			<h4>推荐浏览路线</h4>
			<div class="input-item">
				<button class="btn" onclick="starts()">开始动画</button>
			</div>
		</div>

		<!-- 显示要素 -->
		<div class="input-card features-card"" style=" width:19rem">
			<h4>设置地图显示要素（Features）</h4>
			<div id="map-features">
				<div class="input-item">
					<input type='checkbox' name='mapStyle' value='bg' checked>
					<span class="input-text">区域面（bg）</span>
				</div>
				<div class="input-item">
					<input type='checkbox' name='mapStyle' value='road' checked>
					<span class="input-text">道路（road）</span>
				</div>
				<div class="input-item">
					<input type='checkbox' name='mapStyle' value='building' checked>
					<span class="input-text">建筑物（building）</span>
				</div>
				<div class="input-item">
					<input type='checkbox' name='mapStyle' value='point' checked>
					<span class="input-text">标注（point）</span>
				</div>
			</div>
		</div>
		
		<!--经纬度鹰眼显示-->
		<div class="ol-mouse-position" id="mousePosition"></div>

	</body>
	<script>
		//创建地图对象
		var map = new AMap.Map('container', {
			center: [112.9538, 28.18584],
			zoom: 16,
			viewMode: '3D',
			pitch: 45,
			features: ['bg', 'road', 'building', 'point']
		})


		//设置地图显示要素
		function setMapFeatures() {
			var features = [];
			var inputs = document.querySelectorAll("#map-features input");
			inputs.forEach(function(input) {
				if (input.checked) {
					features.push(input.value);
				}
			});
			map.setFeatures(features);
		}

		//绑定checkbox点击事件
		var inputs = document.querySelectorAll("#map-features input");
		inputs.forEach(function(checkbox) {
			checkbox.onclick = setMapFeatures;
		});

		//使用地图控件
		AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.GeoJSON', 'AMap.MoveAnimation'], function() {
			map.addControl(new AMap.ToolBar({
				position: {
					top: '120px',
					right: '40px',
				},
			}));
			map.addControl(new AMap.Scale());
			map.addControl(new AMap.ControlBar());
		})



		/*打卡标记*/
		// 定义一个全局变量，保存geojson
		var geojson = new AMap.GeoJSON({
			geoJSON: null,
		})

		// 导入数据，当数据为空的时候，会报错，所以在数据不为空的时候才导入
		// 因为getData()返回的是对象，所以需要先将其转为字符串，判断其是否为空字符串，即空数组
		if (JSON.stringify(getData()) != '[]') {
			geojson.importData(getData()) // 将得到的对象导入geojson文件中
			// 恢复旧数据的点击事件：拿到geojson数据中的每一个点，对拿到的每一个点(覆盖物)设置点击监听(随着点击事件的发生，调用后面的函数)
			geojson.eachOverlay(function(item) {
				item.on('click', function(e) {
					var ext = item.getExtData();
					var click = ++ext._geoJsonProperties.click;

					var infowindow = new AMap.InfoWindow({
						anchor: 'top-center',
						content: `<div>打卡了${click}次</div>`,
					})

					infowindow.open(map, item.getPosition());
					saveData(geojson.toGeoJSON()) //同样保存数据
				})
			})
		}
		// 将导入的数据添加到地图上面；这样，刷新浏览器的时候数据就不会消失
		map.add(geojson);

		//实现点击某个地方的标注效果，即监听地图的点击事件，当点击时调用函数
		map.on('click', function(e) {
			//先创建标注对象
			var marker = new AMap.Marker({
				//获取经纬度坐标
				position: e.lnglat,
				extData: {
					// 自定义属性
					_geoJsonProperties: {
						gid: geojson.getOverlays().length + 1,
						click: 0,
					}
				}
			})

			// 使用覆盖物的点击事件：实现对新旧点击事件标记打卡
			marker.on('click', function(e) {
				var ext = marker.getExtData(); // 先得到属性
				var click = ++ext._geoJsonProperties.click;

				// 使用信息提示框显示打卡信息
				var infowindow = new AMap.InfoWindow({
					anchor: 'top-center', //提示框显示的位置
					content: `<div>打卡了${click}次</div>`,
				})
				//显示窗口信息:在地图上的marker上显示信息
				infowindow.open(map, marker.getPosition());
				saveData(geojson.toGeoJSON()); //将新数据重新保存；因为没有保存读取数据的时候还是原来的值
			})
			// 通过geojson来管理覆盖物
			geojson.addOverlay(marker);
			// 保存数据(将geojson对象转换成标准的GeoJSON格式对象)
			saveData(geojson.toGeoJSON())
			map.add(marker);
		})

		document.addEventListener('DOMContentLoaded', function() {
			// 绑定清除按钮的点击事件
			document.getElementById('clearButton').addEventListener('click', clearMarkers);
		});

		// 清除所有标记点的函数
		function clearMarkers() {
			map.clearMap(); // 清除地图上的所有覆盖物
			geojson = new AMap.GeoJSON({
				geoJSON: null
			}); // 重置geojson对象
			localStorage.setItem('geojson', '[]'); // 清空本地存储的数据
		}
		
		
		
		/*地图控件鹰眼、经纬度显示*/
		// 使用地图控件
		AMap.plugin(["AMap.ToolBar",
		"AMap.Scale",
		"AMap.HawkEye",
		"AMap.MapType",
		"AMap.Geolocation",
		"AMap.ControlBar",
		"AMap.GeoJSON", "AMap.MoveAnimation"], function() {
			//鹰眼显示
			map.addControl(new AMap.HawkEye({ 
				isOpen: true,
				position: { bottom: '100px', left: '10px' },
				}));
		});
		
		// 获取鼠标位置的显示元素
		    var lonLatElement = document.getElementById('mousePosition');
		
		// 监听地图的mousemove事件
		    map.on('mousemove', function (e) {
		        var lng = e.lnglat.getLng().toFixed(6);
		            var lat = e.lnglat.getLat().toFixed(6);
		            lonLatElement.innerHTML = `经度: ${lng}, 纬度: ${lat}`;
		    });
			
			
		/*步行导航*/
		var walking = new AMap.Walking({
			map: map,
			panel: "panel"
		});
		//根据起终点坐标规划步行路线
		walking.search([112.9538, 28.18584], [112.94756, 28.18922], function(status, result) {
			// result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
			if (status === 'complete') {
				console.log('绘制步行路线完成')
			} else {
				console.error('步行路线数据查询失败' + result)
			}
		});
		


		/*小车动画*/
		function starts() {
			AMap.plugin('AMap.Driving', function() {
				var driving = new AMap.Driving({
					map: map,
					// policy:AMap.DrivingPolicy.LEAST_TIME,
					policy: 2,
				})
				// 设置起点和终点
				var st = new AMap.LngLat(112.9538, 28.18584);
				var end = new AMap.LngLat(112.94756, 28.18922);

				// 通过geojson得到每一个点的坐标
				var obs = {
					waypoints: [],
				}
				geojson.eachOverlay(function(item) {
					obs.waypoints.push(item.getPosition());
				})

				// 将点的对象传入
				driving.search(st, end, obs, function(status, result) {
					if (status == 'complete') {
						// 路径规划成功，则接下来实现动画效果
						// console.log(result);

						var lineArr = [];
						result.routes[0].steps.forEach(function(item) {
							lineArr.push(...item.path); //遍历路线的每一个步骤，将其路径展开放入lineArr中
						})
						// console.log(lineArr);
						//首先设置小车标记的起始位置
						var marker = new AMap.Marker({
							map: map,
							position: st,
							icon: 'https://webapi.amap.com/images/car.png',
							// 为了不让小车压到路面，为其设置偏移量
							offset: new AMap.Pixel(-26, -13),
							// 小车在转弯的时候转头
							autoRotation: true,
							angle: -180,
						})
						// 构造折线对象
						var passedPolyline = new AMap.Polyline({
							map: map,
							strokeColor: '#AF5',
							strokeWeight: 6,
						})
						// 监听小车移动事件，根据折线事件来建立移动轨迹
						marker.on('moving', function(e) {
							passedPolyline.setPath(e.passedPath);
						})
						map.setFitView(); // 让地图自适应
						marker.moveAlong(lineArr, {
							duration: 500, //更新频率
							autoRotation: true,
						})
					} else {
						console.log('error');
					}
				})
			})
		}
	</script>
</html>